<template>
    <div class='container'>
      <el-card class="main">
        <!-- 顶部工具栏 -->
        <div class="header">
          <el-row type="flex" justify="space-between" >
            <!-- 左边 -->
            <el-row type="flex" align="middle" >
              <div class="text">学科名称</div>
                <el-input style="width:500px;margin-right: 10px;" v-model="searchValue"  @keyup.enter.native="serchClick" ></el-input>
              <!-- 按钮 -->
              <el-row type="flex">
                <el-button  size="small" @click="searchValue = ''">清除</el-button>
                <el-button type="primary" size="small" @click="serchClick">搜索</el-button>
              </el-row>
              <el-col>
              </el-col>
  
            </el-row>
            <!-- 右边 -->
            <el-button type="success" @click="showDialog = true"><i style="margin-right:4px" class="el-icon-edit"></i>新增学科</el-button>
          </el-row>
        </div>
        <!-- 提示 -->
        <el-alert
        type="info"
        class="alertInfo"
        show-icon
        :closable="false"
        >
        <template #title>
          数据一共{{ counts }}条
        </template>
      </el-alert>
      <!-- 主体表格 -->
      <el-table
      :data="subjectList"
      style="width: 100%"
      v-loading.fullscreen="tableLoading"
      >
      <el-table-column
        type="index"
        label="序号"
        align="center"
        width="190"
      >
      </el-table-column>
      <el-table-column
        prop="subjectName"
        label="学科名称"
        align="center"
        width="100"
      >
      </el-table-column>
      <el-table-column
        prop="username"
        label="创建者"
        align="center"
        width="190"
      >
      </el-table-column>
      <el-table-column
        prop="addDate"
        label="创建日期"
        align="center"
        width="200"
      >
      <template slot-scope="{ row }">
          {{ parseTime(row.addDate) }}
      </template>
      </el-table-column>
      <el-table-column
        prop="isFrontDisplay"
        align="center"
        label="前台是否显示"
      >
      <template slot-scope="{ row }">
          {{ row.isFrontDisplay === 1 ? '是' : '否' }}
      </template>
      </el-table-column>
      <el-table-column
        prop="twoLevelDirectory"
        align="center"
        label="二级目录"
      >
      </el-table-column>
      <el-table-column
        prop="tags"
        align="center"
        label="标签"
        >
      </el-table-column>
      <el-table-column
        prop="totals"
        align="center"
        label="题目数量"
        >
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        width="230"
        >
        <!-- -->
        <template  slot-scope="{row}">
          <el-button  type="text" size="medium" @click="routeDirectorysClick(row)">学科分类</el-button>
          <el-button type="text" size="medium" @click="routeTagsClick(row)">学科标签</el-button>
          <el-button type="text" size="medium" @click="setSubjecy(row)">修改</el-button>
          <el-button type="text" size="medium" @click="delSubject(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-row type="flex" justify="end" class="pagination">
      <el-pagination
        background
        :page-sizes="[5, 10, 20, 50]"
        :page-size="10"
        layout="total,  prev, pager, next,sizes, jumper"
        :total="counts"
        @current-change="changePage"
        @size-change="changeSize"
        >
      </el-pagination>
    </el-row>
    <!-- 修改弹窗 -->
    <el-dialog :title="titleDialog" :visible.sync="showDialog" width="460px" @close="close">
      <el-form ref="form" :model="form" label-width="80px" :rules="rules">
        <el-form-item label="学科名称" prop="subjectName">
          <el-input v-model="form.subjectName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="是否显示">
          <el-switch
            v-model="value"
            active-color="#13ce66"
            inactive-color="#ff4949">
          </el-switch>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-row type="flex" justify="end">
          <el-button @click="close">取 消</el-button>
          <el-button type="primary" @click="btnOk">确 定</el-button>
        </el-row>
      </div>
    </el-dialog>
      </el-card>
  
    </div>
  </template>
  
  <script>
  import { list, update, add, remove } from '@/api/hmmm/subjects.js'
  import { parseTime } from '@/utils'
  export default {
    name: 'SubjectS',
    data () {
      return {
        parseTime,
        subjectList: [],
        page: {
          page: 1,
          pagesize: 10,
          subjectName: ''
        },
        searchValue: '',
        tableLoading: false,
        counts: 0,
        showDialog: false,
        form: {
          subjectName: '',
          isFrontDisplay: 1
        },
        // value: true,
        rules: {
          subjectName: [
            { required: true, message: '学科名称不能为空', trigger: 'blur' }
          ]
        },
        isSearch: false
      }
    },
    created () {
      this.getSubjectLists()
    },
    methods: {
      // 获取学科列表
      async getSubjectLists () {
        this.tableLoading = true
        try {
          const { data } = await list(this.page)
          this.subjectList = data.items
          this.counts = data.counts
          this.tableLoading = false
          // console.log(data)
        } catch (err) {
          this.tableLoading = false
        }
      },
      // 搜索
      async serchClick () {
        this.tableLoading = true
        this.isSearch = true
        if (this.searchValue.trim()) {
          try {
            const { data } = await list({ ...this.page, subjectName: this.searchValue })
            this.subjectList = data.items
            this.counts = data.counts
            this.tableLoading = false
            // console.log(data)
          } catch (err) {
            this.tableLoading = false
          }
        } else {
          
          this.isSearch = false
          this.getSubjectLists()
        }
      },
      // 页码变化
      changePage (newPage) {
        this.page.page = newPage
        if (this.isSearch) {
          // 搜索的数据
          this.serchClick()
        } else {
          this.getSubjectLists()
        }
      },
      // 每页装多少条数据变化
      changeSize (newSize) {
        this.page.pagesize = newSize
        if (this.isSearch) {
          this.serchClick()
        } else {
          this.getSubjectLists()
        }
      },
      // 点击修改
      setSubjecy (row) {
        this.showDialog = true
        // console.log(row)
        this.form = { ...row }
      },
      // 点击确定
      async btnOk () {
        await this.$refs.form.validate()
        if (this.form.id) {
          // 此时修改
          try {
            if (this.value) {
            // 此时开启让 isFrontDisplay = 1
              await update({ ...this.form, isFrontDisplay: 1 })
            } else {
              await update({ ...this.form, isFrontDisplay: 0 })
            }
            this.$message.success('更新学科成功')
            this.showDialog = false
            this.getSubjectLists()
          } catch (err) {
            this.showDialog = false
          }
        } else {
          // 此时新增
          try {
            if (this.value) {
            // 此时开启让 isFrontDisplay = 1
              await add({ ...this.form, isFrontDisplay: 1 })
            } else {
              await add({ ...this.form, isFrontDisplay: 0 })
            }
            this.$message.success('添加学科成功')
            this.showDialog = false
            this.getSubjectLists()
          } catch (err) {
            this.showDialog = false
          }
        }
      },
      // 点击删除
      async delSubject (row) {
        // console.log(row)
        try {
          await this.$confirm('此操作将永久删除该学科, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
          await remove(row)
          this.$message.success('删除学科成功')
          this.getSubjectLists()
        } catch (err) {
          console.log(err)
        }
      },
      // 关闭弹窗
      close () {
        this.showDialog = false
        this.form = {
          subjectName: '',
          isFrontDisplay: 1
        }
        this.$refs.form.resetFields()
      },
      // 路由跳转学科分类 跳转到目录
      routeDirectorysClick (row) {
        // console.log(row)
        this.$router.push({
          path: 'directorys',
          query: {
            id: row.id,
            name: row.subjectName
          }
        })
      },
      // 学科标签跳转
      routeTagsClick (row) {
        this.$router.push({
          path: 'tags',
          query: {
            id: row.id,
            name: row.subjectName
          }
        })
      }
    },
    computed: {
      // 处理 是否展示前台的数据
      value: {
        get () {
          return this.form.isFrontDisplay === 1
        },
        set (val) {
          if (val) {
            this.form.isFrontDisplay = 1
          } else {
            this.form.isFrontDisplay = 0
          }
        }
      },
      titleDialog () {
        if (this.form.id) {
          return '修改学科'
        } else {
          return '新增学科'
        }
      }
    }
  }
  </script>
  
  <style  lang='scss'>
  .main {
  
    margin: 10px;
    .text {
      width: 150px;
      margin-left: 20px;
      font-size: 14px;
      font-weight: 700;
    }
    .alertInfo {
      margin-top: 20px;
      margin-bottom: 20px;
    }
    .delete {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      text-align: center;
      line-height: 32px;
      border: 1px solid #facece;
      background-color: #fef0f0;
      color: red;
      font-size: 12px;
      &:hover {
        background-color: #f56c6c;
        color: #fff;
      }
    }
  
   .el-table th.el-table__cell.is-leaf{
      background-color: #fafafa !important;
      border-bottom: 2px solid #e8e8e8;
    }
    .pagination {
      margin-top: 15px;
    }
  }
  .questions {
    margin-top: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #999;
  }
  .remarks {
    border: none;
  }
  .questionMain {
    .title {
      color: blue;
      margin: 10px 0;
    }
  }
  </style>